<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>收款方式</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="js/template/html15shiv.js"></script>
    <script src="js/template/respond.js"></script>
    <![endif]-->


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="js/template/vue.js"></script>
    <script src="js/template/axios.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/template/jquery.js"></script>
    <script src="js/template/bootstrap.js"></script>

    <script>
        $(function() {
            $(".common_header").load('_header.html');
            //$(".common_sidebar").load('_sidebar.html');
        });
    </script>
    <style>
        .input-group{
            margin-bottom: 10px;
        }

    </style>

</head>

<body>

<div class="page">
    <!-- 引出公用的header -->
    <div class="common_header">
    </div>

    <div class="page-content d-flex align-items-stretch">
        <!-- 引出公用的sidebar -->
        <nav class="side-navbar common_sidebar">
            <!-- Sidebar Header-->
            <div class="sidebar-header d-flex align-items-center">
                <div class="title">
                    <h1 class="h4">商家名</h1>
                </div>
            </div>
            <!-- Sidebar Navidation Menus--><span class="heading">影院设置</span>
            <ul class="list-unstyled">
                <li id="consoleSidebar" onclick="consoleSidebar()"><a href="index.html"> <i class="icon-home"></i>控制台 </a></li>
                <li id="scheduleSidebar" onclick="scheduleSidebar()"><a href="schedule.html"> <i class="icon-padnote"></i>排片 </a></li>
                <li><a href="level.html"> <i class="icon-interface-windows"></i></i>VIP设置</a></li>
                <li class="active"> <a href="payment.html"> <i class="icon-screen"></i>收款信息 </a></li>
            </ul><span class="heading">统计与服务</span>
            <ul class="list-unstyled">
                <li> <a href="statistics.html"> <i class="icon-flask"></i>营业额统计 </a></li>
                <li> <a href="#"> <i class="icon-mail"></i> 服务反馈 </a></li>
            </ul>
        </nav>
        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <button type="button" class="btn btn-primary" id="payBtn" onclick="payBtn()">支付宝设置</button>
                <div class="dropdown">
                    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                            data-toggle="dropdown">
                        影院选择
<!--                        <span class="caret"></span>-->
                    </button>
                    <ul class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu1" id="payInfo">
                        <li role="presentation" v-for="cinema in cinemas">
                            <a role="menuitem" tabindex="-1"    :onclick="'select_cinema('+cinema.cinema_id+',\''+cinema.cinema_name+'\')'">{{cinema.cinema_name}}</a>
                            <input type="hidden"  id="getId">
                        </li>
                    </ul>
                </div>
            </header>
            <div style="padding: 100px 100px 10px;" id="out_div">
                <form class="bs-example bs-example-form" role="form" id="pay_div" method="put">

                    <div><label>您的APPID，收款帐号即是您的APPID对应支付宝帐号</label></div>
                    <div class="input-group">
                        <span class="input-group-addon setPay">应用ID</span>
                        <input type="text" class="form-control setPay"  id="app_id" readonly="readonly" value="">
                    </div>
                    <br>
                    <div><label>您的PKCS8格式RSA2私钥</label></div>
                    <div class="input-group">
                        <span class="input-group-addon setPay">商户私钥</span>
                        <input type="text" class="form-control setPay"  id="merchant_private_key" readonly="readonly">
                    </div>
                    <br>
                    <div><label>查看地址：http://openhome.alipay.com/platform/keyManage.html 对应APPID下的支付宝公钥</label></div>
                    <div class="input-group">
                        <span class="input-group-addon setPay">支付宝公钥</span>
                        <input type="text" class="form-control setPay"  id="alipay_public_key" readonly="readonly">
                    </div>
                    <br>
                    <div><label>通知通知页面路径http://工程公网访问地址/alipay.trade.page.pay-JAVA-UTF-8/notify_url.jsp</label></div>
                    <div class="input-group">
                        <span class="input-group-addon setPay">支付通知url</span>
                        <input type="text" class="form-control setPay"  id="notify_url" readonly="readonly" style="border-style:none">
                    </div>
                    <br>
                    <div><label>异步通知页面路径http://工程公网访问地址/alipay.trade.page.pay-JAVA-UTF-8/return_url.jsp</label></div>
                    <div class="input-group">
                        <span class="input-group-addon setPay">支付通知url</span>
                        <input type="text" class="form-control setPay"  id="return_url" readonly="readonly" style="border-style:none">
                    </div>

                    <input type="button" value="确定提交" id="payment_updateBtn" hidden="hidden" >
                </form>
            </div>
            <!-- Page Footer-->
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>Copyright &copy; 2019.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title=""></a>  <a href="http://www.cssmoban.com/" title="网页模板" target="_blank"></a></p>
                        </div>
                        <div class="col-sm-6 text-right">
                            <p></p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>


<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/front.js"></script>
<script>
    $(function () {
        listCinemas();
    })

    //所有影院信息
    function listCinemas() {
    new Vue({
        el: '#payInfo',
        data () {
            return {
                cinemas: null
            }
        },
        mounted () {
            axios
                .get('http://localhost:8788/customerbackend/cinema')
                .then(response => (this.cinemas = response.data.data))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })
    }

    function select_cinema(cinema_id,cinema_name) {
        $('.setPay').attr('readonly','readonly');
        $("#getId").val(cinema_name);
        $('#dropdownMenu1').html(cinema_name);
        $('#payment_updateBtn').attr('onclick','updatePayment('+cinema_id+')');
        new Vue({
        el: '#pay_div',
        mounted () {
            axios
                .get('http://localhost:8788/customerbackend/payment/id?cinema_id='+cinema_id)
                .then(function (response) {
                    var payment=response.data.data;
                   $('#app_id').attr('value',payment.app_id);
                   $('#merchant_private_key').attr('value',payment.merchant_private_key);
                   $('#alipay_public_key').attr('value',payment.alipay_public_key);
                   $('#notify_url').attr('value',payment.notify_url);
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })
    }

    function payBtn() {
        $('.setPay').removeAttr('readonly');
        $('#payment_updateBtn').attr('hidden','');
    }

    //修改payment
    function updatePayment(cinema_id) {
      var app_id= $('#app_id').val();
      var merchant_private_key= $('#merchant_private_key').val();
      var alipay_public_key=  $('#alipay_public_key').val();
      var notify_url=$('#notify_url').val();
        const params = new URLSearchParams();
        params.append('app_id',app_id );
        params.append('merchant_private_key',merchant_private_key );
        params.append('alipay_public_key',alipay_public_key );
        params.append('notify_url',notify_url);
        params.append('return_url',return_url);
        params.append('cinema_id',cinema_id);
        new Vue({
            el: '#pay_div',
            mounted() {
                axios.put('http://localhost:8788/customerbackend/payment',params)
                    .then(function (response) {
                        alert(response.data.msg);
                        var cinema_name=$('#getId').val();
                        select_cinema(cinema_id,cinema_name)
                        $('.setPay').attr('readonly','readonly');
                    })
                    .catch(function (error) {
                        console.log(error);
                        alert("添加失败")
                    })
            }
        })
    }


</script>


</body>

</html>